iT邦幫忙

0

Day 49 (Node.js)

  • 分享至 

  • xImage
  •  

1.express-session設定

     var express = require('express');
     var session = require('express-session');
     var app = express();
     app.use(session({
          secret: 'asdoijisjdfiogjfdiogjdfoi,  //必要
          resave: true,
          saveUninitialized: true,

          cookie:{
               path: '/',
               httpOnly: true,
               secure: false,
               maxAge:5*1000
          }
     }))

(1)secret:型態為字串,作為Server端生session的簽章 (必要)
(2)name:儲存在Client端的key的名稱·設為connect.sid
(3)resave:每次請求時,是否對session進行修改並覆寫 (true,false)
(4)saveUninitialized:是否保存未初始化session (true,false)
(5)store:session的儲存方式,預設為記憶體
Cookie: {
(6)path:cookie存放在Client端的路徑·預設為/
(7)httpOnly:是否只能白Server更改Cookie
(8)secure:是否只在HTTPS協定中使用Cookie
(9)maxAge:設定cookie存活時間·以毫秒為單位(1000=1s)
}


2.不知道從何下手時,照使用者使用操作的順序寫下去

ex:先index > login > member


3.路徑抓取次序

(1)會先抓public/index.html (靜態路由)

    app.use(express.static(path.join(__dirname, 'public'))); 

(2)抓不到時抓views內 (動態路由)

    app.use('/', indexRouter); 
    app.use('/users', usersRouter); 

(3)routes內
(3-1)routes > index.js 下

    router.get('/', function(req, res, next) {
      res.render('index', { title: 'Express' });
    });

    module.exports = router;

(3-1)routes > users.js 下

    http://localhost:3000/users/login
    router.get('/login', function(req, res, next) {
      res.render('login',{}); //login網頁 , {}login的內容
    });

    http://localhost:3000/users/member
    router.get('/login', function(req, res, next) {
      res.render('login',{}); //login網頁 , {}login的內容
    });

**有時候讀不出來是沒有關掉重跑npm
ctrl + c > y
npm start

** 使用下列小技巧package.json內的start就不用一直重跑npm

  "scripts": {
    "start": "node ./bin/www"
  },

  "scripts": {
    "start": "nodemon ./bin/www"
  },

之後執行 npm start 效果同 nodemon index.js


4.session

(1)安裝

npm i express-session

(2)引入MOD

   var session = require("express-session")

(3)定義session

    app.use(
      session({                       //session設定 ; secret必要
          secret: "passwordE$%*&%$*"    
      })
    )

(4)設定session

   router.post('/login', function(req, res, next) {
      //req.body.txtID的body需要express.urlencoded解碼
      var userName = req.body.txtID;    
      req.session.userName = req.body.txtID; //設定session
      res.send('NAME:'+ userName); //login網頁 , {}login的內容
   });

其餘設定:

(5)轉跳頁面(則一)

  res.send('NAME:'+ userName);           //轉跳login網頁 , {}login的內容
  res.redirect("http://www.yahoo.com");  //轉跳網頁(與前擇一)

(6)登入帳號後顯示登入姓名

(6-1) index.ejs

  <h3>Hello!<%= userName %></h3>

(6-2) index.js

  res.render('index', { userName:req.session.userName || "Guset" });

Q:為何原本的檔案(html),抓取資料的路徑不會受影響(例如原檔案引入jquery)
A:
1.絕對路徑
2.因為views資料夾看不到(伺服器端 因為是靠view:require>render連接的)

    app.set('views', path.join(__dirname, 'views'));  //連接view 伺服器端
    app.set('view engine', 'ejs');

課後討論

5.指令整理

npm init -y ==> package.json 產生
npm install ==>package.json 的dependencies內的套件全安裝
npm install express ==> 安裝express套件(全部都要用)
npm install ip ==> 安裝ip套件
npm install ejs ==> 安裝ejs套件(伺服器網頁顯示前端)
npm install express-session ==> 安裝express-session套件 (有登入都會用到、即時狀態)

nodemon index.js ==> 隨時跑程式(就不用一直 node XXX.js)

專案建立

express --ejs myPrject
express --ejs

暫停伺服器(ejs > views用)

crtl + c :y
npm start ==>跑package.json內的start

** 小技巧package.json內的start

  "scripts": {
    "start": "node ./bin/www"
  },

  "scripts": {
    "start": "nodemon ./bin/www"
  },

之後執行 npm start 效果同 nodemon index.js


6. express套件類似MAMP小象


7. session 物件的概念

https://ithelp.ithome.com.tw/upload/images/20210812/2013768496ROo0UCZS.jpg


8. session安裝順序 使用於製作登入系統

(1)npm init -y ==> package.json 產生
(2)npm install express ==> 安裝express套件
(3)express --ejs ==>新增ejs專案(伺服器網頁顯示前端)
(4)npm install express-session ==>安裝express-session套件(有登入都會用到、即時狀態)


9.session與post的差異:

test1.php下

    session_start();
    
    $_SESSION['s1'] = "我是session";
    $_POST['p1'] = "我是post";
    $_GET['g1'] = "我是get";

    $s1 = $_SESSION['s1'];
    $p1 = $_POST['p1'];  or 表單給
    $g1 = $_GET['g1']; or 網址?g1=1231

    echo $s1.'<bry';
    echo $p1.'<br>';
    echo $g1.'<br>';

    header("Location: test2.php");//轉跳至此

test2.php下

    session_start();

    $s1 = $_SESSION['s1'];
    $p1 = $_POST['p1'];  or 表單給
    $g1 = $_GET['g1']; or 網址?g1=1231

只有session有顯示:我是session (被暫存到下一隻檔案)


10.會員登入的邏輯:

資料庫(MySQL)抓資料
並與session配對
符合及即可登入並且session可以維持一段時間


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言